<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>state简写方式</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <script type="text/babel">
        class Lss extends React.Component {
            showOne = () => {
                console.log('refOne', this.refs.inputOne.value);
            }
            showTwo = () => {
                console.log('refTwo', this.refs.inputTwo.value);
            }
            render() { // render用来渲染一个虚拟DON
                return (
                    <div>
                        <input ref="inputOne" placeholder="请输入" /> &nbsp;
                        <button onClick={this.showOne}>点击弹出左侧值</button> &nbsp;
                        <input ref="inputTwo" onBlur={this.showTwo} />
                    </div>
                )
            }
        }

        ReactDOM.render(<Lss />, document.querySelector('#test'))

        /**
         * 通过给组件打一个ref，相当于给组件起一个名字
         * 起了名字以后，就可以通过this.refs.kkk访问到这个组件
         * 就可以使用这个组建的值了
         *
         * 这个是第一种ref的写法
         * 但是这个方法将来可能会被废弃，可能...
         * */

    </script>
</body>

</html>